import React, { Component } from 'react'
import axios from '../utils/request'
import '../App.css'
import { Carousel } from 'antd';
const contentStyle = {
    height: '200px',
    color: '#fff',
    lineHeight: '200px',
    textAlign: 'center',
    background: '#364d79',
};
export default class Sleep extends Component {
    state = {
        list: []
    }

    componentDidMount() {
        axios({
            url: '/getlist',
            method: 'post'
        }).then(res => {
            this.setState({
                list: res.data.data
            })
        })
    }
    render() {
        const {list}=this.state
        return (
            <div className='sleep'>
                <div className='swiper_12'>
                    <Carousel autoplay className='swper'>
                        <div>
                            <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=3812887605,293544107&fm=26&fmt=auto"></img></h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}><img src="https://img1.baidu.com/it/u=2936325996,3518721181&fm=26&fmt=auto"></img></h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}><img src="https://img2.baidu.com/it/u=1294124583,358965884&fm=26&fmt=auto"></img></h3>
                        </div>
                        <div>
                            <h3 style={contentStyle}><img src="https://img0.baidu.com/it/u=1277093902,2973122174&fm=26&fmt=auto"></img></h3>
                        </div>
                    </Carousel>
                </div>
                <div className='swiper_21'>
                    {
                        list.length && list.map((item, index) => {
                            return <div key={index} className='time'>

                                <img src={item.imgs}></img>
                                <div>
                                    <li>{item.sold}</li>
                                    <li><span>{item.time}</span>&emsp;&emsp;&emsp;&emsp;&emsp;<span>阅读{item.num}</span>&emsp;<span>赞{item.count}</span></li>
                                </div>
                            </div>

                        })
                    }
                </div>
            </div>
        )
    }
}

